const todolist = document.querySelector("#todoList");
const todoShow = document.querySelector(".show");
const btn = document.querySelector('button');
const inp = document.querySelector('[type="text"]');
const listDiv = document.createElement('div');
const listTitle = document.createElement('h3');
const listUl = document.createElement('ul');
const timeInp = document.querySelector("[type='datetime-local']");
btn.onclick = (e) => {
    listTitle.innerHTML = "待办事项";
    listDiv.appendChild(listTitle);
    const listLi = document.createElement('li');
    listLi.innerHTML = inp.value;
    const doneDiv = document.createElement('div');
    doneDiv.innerHTML = "√";
    doneDiv.className = "done";
    const deteleDiv = document.createElement('div');
    deteleDiv.innerHTML = "×";
    deteleDiv.className = "detele";
    const updateDiv = document.createElement('div');
    updateDiv.innerHTML = "↑";
    updateDiv.className = "update";
    listLi.appendChild(doneDiv);
    listLi.appendChild(deteleDiv);
    listLi.appendChild(updateDiv);
    listLi.innerHTML += "到期时间-"+timeInp.value;
    listUl.appendChild(listLi);
    listDiv.appendChild(listUl);
    todoShow.appendChild(listDiv);
    overdueFun(e,listLi);
}
const doneTitle = document.createElement("h3");
const doneDiv = document.createElement("div");
const doneUl = document.createElement("ul");
listUl.onclick = (e) => {
    console.log(e.target);
    if (e.target.className == "done") {
        doneFn(e);
    } else if (e.target.className == "detele") {
        deteleFn(e);
    } else if (e.target.className == "update") {
        updateFn(e);
    }
}

// 完成待办事项
const doneFn = (e) => {
    doneTitle.innerHTML = "已完成事项";
    doneDiv.appendChild(doneTitle);
    let doneLi = document.createElement("li");
    doneLi.innerHTML = e.target.parentNode.firstChild.data;
    console.log(doneLi);
    doneDiv.appendChild(doneTitle);
    doneUl.appendChild(doneLi);
    doneDiv.appendChild(doneUl);
    todolist.appendChild(doneDiv);
    deteleFn(e);
    if (listUl.innerHTML == "") {
        todoShow.innerHTML = "";
    }
}

// 删除待办事项
const deteleFn = (e) => {
    const thisLi = e.target.parentNode;
    thisLi.parentNode.removeChild(thisLi);
}

// 删除待办事项
const updateFn = (e) => {
    const thisLi = e.target.parentNode;
    thisLi.firstChild.data = inp.value;
}

// 过期事项处理
const overdueTitle = document.createElement("h3");
const overdueDiv = document.createElement("div");
const overdueUl = document.createElement("ul");
const overdueFun = (e,listLi) => {
    const newDate = new Date().getTime();
    const overDate = new Date(timeInp.value).getTime();
    if (newDate > overDate) {
        overdueTitle.innerHTML = "已过期事项";
        doneDiv.appendChild(doneTitle);
        let overdueLi = document.createElement("li");
        overdueLi.innerHTML = listLi.firstChild.data + "-已过期";
        console.log(overdueLi);
        overdueDiv.appendChild(overdueTitle);
        overdueUl.appendChild(overdueLi);
        overdueDiv.appendChild(overdueUl);
        todolist.appendChild(overdueDiv);
        listLi.parentNode.removeChild(listLi);
        if (listUl.innerHTML == "") {
            todoShow.innerHTML = "";
        }
    }
}